<template>
    <div>
        <top></top>
        <div>
            <div>
                <el-carousel :interval="3500" height="500px" trigger="click">
                    <el-carousel-item v-for="(item,index) in images" :key="index">
                        <img :src="item" alt=""/>
                    </el-carousel-item>
                </el-carousel>
            </div>
            <div class="guide">
                <div class="guide_main">
                    <ul>
                        <li v-for="(item,index) in guide" :key="index" @mouseenter="activeIndex = index"
                            @mouseleave="activeIndex = -1">
                            <a @click="toProduct(item.product_name)">{{ item.product }}<span>></span></a>
                        </li>
                    </ul>
                </div>
                <div class="guide_drop" v-for="(item,index) in guide" :key="index" v-if="activeIndex === index">
                    {{ item.product }}
                </div>
            </div>
            <div class="qwe" style="background-color: #F1f3f5">
                <el-container class="items">
                    <div class="item">
                        <div class="title">
                            <span>手机专区</span>
                        </div>
                        <div class="detail">
                            <el-container class="first">
                                <div class="concreteItem" v-for="(item,index) in phone" :key="index"
                                     @click="toItemInfo(item.item_id)">
                                    <img :src=item.imgUrl alt="">
                                    <div class="name">{{ item.name }}</div>
                                    <div class="price">{{ item.price }}</div>
                                </div>
                            </el-container>
                        </div>
                    </div>
                    <div class="item">
                        <div class="title">
                            <span>平板专区</span>
                        </div>
                        <div class="detail">
                            <el-container class="first">
                                <div class="concreteItem" v-for="(item,index) in pad" :key="index"
                                     @click="toItemInfo(item.item_id)">
                                    <img :src=item.imgUrl alt="">
                                    <div class="name">{{ item.name }}</div>
                                    <div class="price">{{ item.price }}</div>
                                </div>
                            </el-container>
                        </div>
                    </div>
                    <div class="item">
                        <div class="title">
                            <span>电脑专区</span>
                        </div>
                        <div class="detail">
                            <el-container class="first">
                                <div class="concreteItem" v-for="(item,index) in book" :key="index"
                                     @click="toItemInfo(item.item_id)">
                                    <img :src=item.imgUrl alt="">
                                    <div class="name">{{ item.name }}</div>
                                    <div class="price">{{ item.price }}</div>
                                </div>
                            </el-container>
                        </div>
                    </div>
                </el-container>
            </div>
        </div>
    </div>
</template>

<script>
import top from "./common/top.vue"
import axios from "axios";


export default {
    name: "MainPage",
    components: {top},
    data() {
        return {
            show: true,
            images: [
                require("../assets/img/banner-01.png"),
                require("../assets/img/banner-02.png"),
                require("../assets/img/banner-03.png"),
                require("../assets/img/banner-04.png")
            ],
            guide: [{id: 1, product: "手机", product_name: "Phone"},
                {id: 2, product: "平板", product_name: "Pad"},
                {id: 3, product: "电脑", product_name: "Book"},
                {id: 4, product: "智慧屏"},
                {id: 5, product: "穿戴"},
                {id: 6, product: "耳机音箱"},
                {id: 7, product: "门锁路由"},
                {id: 8, product: "出行车品"},
                {id: 9, product: "配件"},
                {id: 10, product: "生态产品"},
                {id: 11, product: "美食酒饮"},
            ],
            activeIndex: -1,//当前鼠标的位置
            imgUrl: '',
            itemType: ["Phone", 'Book', 'Pad'],
            phone: [
                {name: "HUAWEI Mate 50 Pro", item_id: "Mate-01", price: "￥6799", imgUrl: ""},
                {name: "HUAWEI Mate 50E", item_id: "Mate-02", price: "￥5999", imgUrl: ""},
                {name: "HUAWEI 12 pro", item_id: "Mate-03", price: "￥14999", imgUrl: ""},
                {name: "HUAWEI 畅享50 Pro", item_id: "Changxiang-02", price: "￥1599", imgUrl: ""},],
            pad: [
                {name: "HUAWEI MatePad 11", item_id: "MatePad-01", price: "￥2999", imgUrl: ""},
                {name: "HUAWEI MatePad Pro", item_id: "MatePad-02", price: "￥4099", imgUrl: ""},
                {name: "HUAWEI MatePad Paper", item_id: "MatePad-03", price: "￥5209", imgUrl: ""},
                {name: "HUAWEI MatePad Pro 12.6", item_id: "MatePad-04", price: "￥4499", imgUrl: ""}
            ],
            book: [
                {name: "HUAWEI MateBook 13", item_id: "MateBook-01", price: "￥4499", imgUrl: ""},
                {name: "HUAWEI MateBook 16", item_id: "MateBook-02", price: "￥8999", imgUrl: ""},
                {name: "HUAWEI MateBook X Pro ", item_id: "MateBookX-01", price: "￥10399", imgUrl: ""},
                {name: "HUAWEI MateBook 14", item_id: "MateBook-03", price: "￥5599", imgUrl: ""}
            ]
        }
    },
    mounted() {
        this.showImage()
    },
    methods: {
        showImage() {
            for (let i = 0; i < this.phone.length; i++) {
                axios({
                    method: "get",
                    url: "images/items/" + this.phone[i].item_id,
                    responseType: "blob"
                }).then(res => {
                    this.phone[i].imgUrl = URL.createObjectURL(res.data); //res.data为请求的数据\
                })
            }
            for (let i = 0; i < this.pad.length; i++) {
                axios({
                    method: "get",
                    url: "images/items/" + this.pad[i].item_id,
                    responseType: "blob"
                }).then(res => {
                    this.pad[i].imgUrl = URL.createObjectURL(res.data); //res.data为请求的数据\
                })
            }
            for (let i = 0; i < this.book.length; i++) {
                axios({
                    method: "get",
                    url: "images/items/" + this.book[i].item_id,
                    responseType: "blob"
                }).then(res => {
                    this.book[i].imgUrl = URL.createObjectURL(res.data); //res.data为请求的数据\
                })
            }
        },
        toProduct(product_name) {
            window.sessionStorage.setItem("product_name", product_name)
            window.sessionStorage.setItem('searchInfo', '')
            this.$router.push("product")
        },
        toItemInfo(item_id) {
            window.sessionStorage.setItem("item_id", item_id)
            this.$router.push({
                name: "item",
            })
        }
    }
}

</script>

<style scoped>
img {
    width: 100%;
    height: 100%;
}

.guide {
    background-color: white;
    position: absolute;
    top: 130px;
    left: 5%;
    z-index: 99;
    box-shadow: rgba(0, 0, 0, 0.1) 0 0 36px;

}

.guide_main {
    float: left;
    width: 200px;

}

.guide_main ul {
    display: flex;
    flex-direction: column;
}

.guide_main ul li {
    height: 30px;
    padding: 5px;
}

.guide_main li:hover {
    background-color: rgba(245, 80, 34, 0.98);
}

.guide_main ul li a {
    display: inline-block;
    width: 90%;
    margin-left: 5%;
    font-size: 16px;
    color: #545451;
    height: 30px;
    line-height: 30px;
}

.guide_main span {
    float: right;
}

.guide_drop {
    float: left;
    width: 100px;
    height: 440px;
    background-color: white;
}

.items {
    width: 90%;
    margin: 0 auto;
    padding-top: 30px;
    flex-direction: column;
}

.item {
    width: 100%;
}

.title span {
    font-size: 24px;
    font-weight: 400;
}

.detail {
    width: 100%;
    height: 450px;
    margin-top: 10px;
    flex-direction: column;
    justify-content: space-between;
}

.detail .first {
    width: 100%;
    height: 48%;

    justify-content: space-between;
}

.concreteItem {
    height: 380px;
    width: 23%;
    background-color: #fff;
    text-align: center;
    line-height: 200px;
    transition: all 0.3s ease-in-out;
}

.concreteItem:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
    cursor: pointer;
}


.first img {
    display: block;
    width: 65%;
    height: 70%;
    margin: 30px auto 0;
}

.name {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    font-size: 18px;
}

.price {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20px;
    font-size: 18px;
}

</style>